/*使用时需要注意的点:
*  视口div: scroll-con
*  图片的src属性替换:data-src(开始不让其加载)
*  使用的时候和lazyload_img.css共同使用才有效果
* */
const con = document.querySelector('.scroll-con');
const imgs = document.querySelectorAll('.scroll-con-img');

const options = {
    // root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。
    root: con, // 存在很大歧义, 给div加特效的时候回一直触发不知道什么鬼
    // threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，
    // 即交叉比例（intersectionRatio）达到0时触发回调函数。
    // 比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
    threshold: 0.5,
    // 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。
    // 它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。
    // 这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。
    rootMargin: '0px'
};

/**
 * 采用 IntersectionObserver 低级优先级的监听来监听div('scroll-con)和目标元素(target=>img)是否出现交集的判断,
 * 触发回调, 将真实图片资源加载
 * @param target 目标DOM
 */
function lazyLoad(target) {
    const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                const src = img.getAttribute('data-src');
                img.setAttribute('src', src);
                img.classList.add('fadeIn');
                observer.disconnect();
            }
        });
    }, options);
    io.observe(target);
}

// 添加监听事件
// imgs.forEach(lazyLoad);
